<script type="text/javascript" src="js/tools/jquery-1.6.1.min.js"></script>


<script type="text/javascript">
$('#biuuu').imgAreaSelect({  
aspectRatio:'1:1', //截取比例  
show:true,  
resizable:true, //是否可调整大小  
autoHide: false,//选择框选择完毕是否自己取消  
handles:true,  
key:true, //是否启用键盘，默认为false  
//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域，原始的  
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标  
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小  
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框  
onSelectChange:preview //选框移动时触发的事件  
//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件  
});  


$('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')  
.css({  
float: 'left',  
position:'relative',  
overflow:'hidden',  
width: '100px',  
height: '100px'  
}).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后 

function previewImage(file)  
{  
var porImg = $('#biuuu'),//首先获取大图片jquery对象  
viewImg = $('#view');//小图片jquery对象  
//判断该浏览器是否为w3c标准，既非IE浏览器   
if (file["files"] && file["files"][0])  
{  
//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究  
var reader = newFileReader();  
reader.onload =function(evt){  
porImg.attr({src :evt.target.result});  
viewImg.attr({src: evt.target.result});  
}  
reader.readAsDataURL(file.files[0]);  
}  
//如果是IE浏览器，采用滤镜效果，进行显示，但特别注意的是该滤镜效果使用的对象是div对象，并非img对象，因此我们需要将原有的img对象remove同时生成新的div对象，并且赋值相应的class和id  
else  
{  
//创建需要滤镜显示的div的dom对象  
var ieImageDom =document.createElement("div");  
var proIeImageDom =document.createElement("div");  
//设置对象的css属性和原有的img对象属性相同，添加相应的id属性值  
$(ieImageDom).css({  
float: 'left',  
position:'relative',  
overflow:'hidden',  
width: '100px',  
height: '100px'  
}).attr({"id":"view"});  
$(proIeImageDom).attr({"id":"biuuu"});  
//删除原有img对象，append创建div的dom对象  
porImg.parent().prepend(proIeImageDom);  
porImg.remove();  
viewImg.parent().append(ieImageDom);  
viewImg.remove();  
//采用滤镜效果生成图片预览  
file.select();  
path =document.selection.createRange().text;  
$(ieImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});  
$(proIeImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});  
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果  
}

</script>

<!—预览图片显示区域-->  
<div id=”image_area”>  
<img id="biuuu"src="#" title="biuuu">  
</div>  
<!—图片上传区域-->  
<div id =”upload_area”>  
<form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST'>  
<input type="file"id="picpath" name="atvatar_image">  
<a href="javascript:void(0);"class="button"> 上传照片</a>  
<input type='text'name="path" readonly>  
<div id = “submit_button”>  
<a href="javascript:void(0);"class='button'>确认</a>  
</div>  
